<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:750px;height: 580px;"
        align-center>
        <div>
            <el-timeline style="max-width: 600px">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                    :type="activity.type" :color="activity.color" size="large">
                    <el-card>
                        <div>
                            <p calss="p1">审批人：</p>
                            <span>{{ activity.realTeacherName }}</span>
                        </div>
                        <div>
                            <p calss="p1">审批人工号：</p>
                            <span>{{ activity.teacherNumber }}</span>
                        </div>
                        <div>
                            <p calss="p1">审批状态：</p>
                            <span style="color: #FF9F38;" v-if="activity.status == 0">未审批</span>
                            <span style="color: #67C23A;" v-if="activity.status == 1">已审批</span>
                            <span style="color: #ff0000;" v-if="activity.status == 2">已驳回</span>
                        </div>
                        <div>
                            <p calss="p1">审批级别：</p>
                            <span>{{ activity.level }}级审批人</span>
                        </div>

                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
import { InfoFilled, SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
export default {
    name: "AddFaProject",
    components: { ElForm, ElMessage, CircleCloseFilled },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            activities: []

        };
    },
    mounted() {
    },
    methods: {
        getApproveById(id) {
            this.activities = []
            httpService("/javaApi/faProjectApprove/list/1/10", { "projectId": id }, "get").then(
                (data) => {
                    console.log(data);
                    if (data.list) {
                        this.activities = data.list.map(item => {
                            if (item.status == 0) {
                                return {
                                    ...item,
                                    type: 'warning',
                                    icon: InfoFilled,
                                }
                            } else if (item.status == 1) {
                                return {
                                    ...item,
                                    type: 'success',
                                    icon: SuccessFilled,
                                }
                            } else if (item.status == 2) {
                                return {
                                    ...item,
                                    type: 'danger',
                                    icon: CircleCloseFilled,
                                }
                            }
                        })
                        console.log(this.activities);
                    }
                }
            );
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            // this.addFaProjectForm.id = "";

            this.title = ""
            this.personnelType = ""
        },

    },
};
</script>
<style>
.el-dialog {
    width: 80%;
}

.selest_11 {
    width: 190px;
}

.el-upload button {
    width: 190px;
}

.el-card__body {
    /* padding: var(--el-card-padding); */
    --el-card-padding: 10px 20px;
    padding: 5px 20px;
}

.el-card__body div {
    display: flex;
    justify-content: flex-start;

}

.el-card__body p {
    margin: 5px;
    width: 85px;
    text-align: right;
}

.el-card__body span {
    /* width: 150px; */
    /* text-align: right; */
    margin: 5px;
}

/* .el-card__body .p1 {
    width: 150px;
    text-align: right;
} */
.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}
</style>